<template>
    <div>
        <div class="img1">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" style="width: 100%;height: 220px;" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="img2">
            <van-card price="2599起" desc="新品 Flyme ALOS" title="魅族21NOTE"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        </div>
        <div class="img3">
            <van-card price="4199起" desc="新品 Flyme ALOS" title="魅族21PRO"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        </div>
        <div class="img4">
            <van-card title="魅族21" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        </div>
        <div class="img5">
            <van-card title="魅族20" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        </div>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
</script>

<style>
.img1 {
    width: 100%;
    height: 220px;
}

.img2 {
    float: left;
    width: 50%;
    height: 200px;
}

.img3 {
    float: left;
    width: 50%;
    height: 200px;
}

.img4 {
    float: left;
    margin-top: -95px;
    width: 50%;
    height: 200px;
}

.img5 {
    float: left;
    margin-top: -95px;
    width: 50%;
    height: 200px;
}
</style>